<script setup lang="ts">
import { ref, onMounted } from "vue";
import { Api } from "../../assets/api/api";
import { getCurrentInstance } from "vue";
import type {
  PageMainDataType,
  RotationChartType,
  HomeDataType,
} from "../../home";
import { useRouter } from "vue-router";

// 轮播图小点
const current = ref(0);
//轮播图数据
const rotationChart = ref<Array<RotationChartType>>([]);
const rotationChartImg = ref<Array<string>>([]);
//首页主要数据
const pageMainData = ref<Array<PageMainDataType>>([]);
//书本类型选择数据
const homeData = ref<HomeDataType>({
  ranking: {
    title: [],
  },
});
//重磅推荐
const heavyRecommendationData = ref<Array<Object>>([]);
const heavyRecommendationTitle = ref("");
//潜力新书
const potentialNewbookData = ref<Array<Object>>([]);
const potentialNewbookTitle = ref("");
//男生小说
const boyFirstData = ref({});
const boyTitle = ref("");
const boyData = ref<Array<Object>>([]);
//女生小说
const girlFirstData = ref({});
const girlTitle = ref("");
const girlData = ref<Array<Object>>([]);
//包月精品
const boutiqueTitle = ref("");
const boutiqueData = ref<Array<Object>>([]);
//大神作者推荐
const okamiTitle = ref("");
const okamiData = ref({});
//分类排行榜样式控制
const classiFicationStyle = ref(0);
const classRanking = ref<Array<string>>([]);
// 获取当前组件实例
const { proxy } = <any>getCurrentInstance();

// vue3自带方法
const router = useRouter();

// 轮播图小点控制
const onChange = (index: number) => {
  current.value = index;
};

//获取首页主要数据
const getPageList = async () => {
  let { data } = await Api.getHomePageUrl();
  pageMainData.value = data.data.list;
  //轮播图数据处理
  rotationChart.value = pageMainData.value[0].banners.splice(2, 2);
  for (let i = 0; i < rotationChart.value.length; i++) {
    rotationChartImg.value.push(rotationChart.value[i].cover);
  }
  //重磅推荐数据处理
  heavyRecommendationTitle.value = "重磅推荐";
  heavyRecommendationData.value = pageMainData.value[3].list;
  //潜力新书
  potentialNewbookTitle.value = "潜力新书";
  potentialNewbookData.value = pageMainData.value[4].list;
  //男生小说
  boyFirstData.value = pageMainData.value[5].list[0];
  let boy1 = <Array<Object>>[];
  let boy2 = <Array<Object>>[];
  for (let j = 1; j <= 2; j++) {
    boy1.push(pageMainData.value[5].list[j]);
    boy2.push(pageMainData.value[6].list[j]);
  }
  let boy3 = boy1.concat(boy2);
  boyTitle.value = "男生小说";
  boyData.value = boy3;
  //女生小说
  girlFirstData.value = pageMainData.value[7].list[0];
  let girl1 = <Array<Object>>[];
  let girl2 = <Array<Object>>[];
  for (let j = 1; j <= 2; j++) {
    girl1.push(pageMainData.value[7].list[j]);
    girl2.push(pageMainData.value[8].list[j]);
  }
  console.log(1, data);
  let girl3 = girl1.concat(girl2);
  girlTitle.value = "女生小说";
  girlData.value = girl3;
  //包月精品
  boutiqueTitle.value = "包月精品";
  console.log(2, boutiqueTitle.value);
  boutiqueData.value = pageMainData.value[9].list;

  //大神作者推荐
  okamiTitle.value = "大神作者推荐";
  okamiData.value = pageMainData.value[6].list[0];
};

//获取书本类型选择数据
proxy.$axios.get("/data.json").then((res: any) => {
  homeData.value = res.data.nav_class[0];
  classRanking.value = homeData.value.ranking.title;
});

//分类排行榜样式控制
const cfStyleChange = (i: number) => {
  classiFicationStyle.value = i;
};
//跳转小说详情页
const goDetailView = (id: string) => {
  router.push({
    name: "detail",
    params: {
      id,
    },
  });
};

onMounted(() => {
  getPageList();
});
</script>

<template>
  <main>
    <!-- 轮播图 -->
    <div class="slideshow">
      <van-swipe
        class="ul"
        :autoplay="3000"
        initial-swipe="0"
        @change="onChange"
      >
        <van-swipe-item
          v-for="(image, index) in rotationChartImg"
          :key="index"
          class="li"
        >
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 书本类型选择 -->
    <ul class="bookType">
      <li v-for="(item, index) in homeData.book_class" :key="index">
        <van-image width="26" height="22" :src="item.img" />
        <span>{{ item.title }}</span>
      </li>
    </ul>
    <!-- 重磅推荐 -->
    <div class="bist">
      <h1>{{ heavyRecommendationTitle }}</h1>
      <ul>
        <li
          v-for="item in heavyRecommendationData"
          :key="item.id"
          @click="goDetailView(item.id)"
        >
          <van-image width="60" height="80" :src="item.cover" />
          <div class="font">
            <h1>
              <span>{{ item.title }}</span>
            </h1>
            <span>{{ item.author }}</span>
            <p>
              {{ item.content }}
            </p>
            <button>立即阅读</button>
          </div>
        </li>
      </ul>
      <h2>更多重磅推荐&nbsp;&nbsp;<span></span></h2>
    </div>
    <!-- 潜力新书 -->
    <div class="potential">
      <h1>{{ potentialNewbookTitle }}</h1>
      <ul>
        <li v-for="item in potentialNewbookData" :key="item.id">
          <van-image width="100%" height="142" :src="item.cover" />
          <p>{{ item.title }}</p>
        </li>
      </ul>
      <h2>进入新书专区&nbsp;&nbsp;<span></span></h2>
    </div>
    <!-- 男生小说 -->
    <div class="boy">
      <h1>{{ boyTitle }}</h1>
      <ul>
        <li>
          <van-image width="60" height="80" :src="boyFirstData.cover" />
          <div class="font">
            <h1>
              <span>{{ boyFirstData.title }}</span>
            </h1>
            <span>{{ boyFirstData.author }}</span>
            <p>
              {{ boyFirstData.content }}
            </p>
            <button>立即阅读</button>
          </div>
        </li>
        <li v-for="item in boyData" :key="item.id">
          <p>{{ item.title }}</p>
        </li>
      </ul>
      <h2>更多男生小说&nbsp;&nbsp;<span></span></h2>
    </div>
    <!-- 女生小说 -->
    <div class="boy">
      <h1>{{ girlTitle }}</h1>
      <ul>
        <li>
          <van-image width="60" height="80" :src="girlFirstData.cover" />
          <div class="font">
            <h1>
              <span>{{ girlFirstData.title }}</span>
            </h1>
            <span>{{ girlFirstData.author }}</span>
            <p>
              {{ girlFirstData.content }}
            </p>
            <button>立即阅读</button>
          </div>
        </li>
        <li v-for="item in girlData" :key="item.id">
          <p>{{ item.title }}</p>
        </li>
      </ul>
      <h2>更多女生小说&nbsp;&nbsp;<span></span></h2>
    </div>
    <!-- 包月精品  -->
    <div class="potential">
      <h1>{{ boutiqueTitle }}</h1>
      <ul>
        <li v-for="item in boutiqueData" :key="item.id">
          <van-image width="100%" height="142" :src="item.cover" />
          <p>{{ item.title }}</p>
        </li>
      </ul>
      <h2>更多包月精品&nbsp;&nbsp;<span></span></h2>
    </div>
    <!-- 大神作者推荐 -->
    <div class="boy">
      <h1>{{ okamiTitle }}</h1>
      <ul>
        <li>
          <van-image width="60" height="80" :src="okamiData.cover" />
          <div class="font">
            <h1>
              <span>{{ okamiData.title }}</span>
            </h1>
            <span>{{ okamiData.author }}</span>
            <p>
              {{ okamiData.content }}
            </p>
            <button>立即阅读</button>
          </div>
        </li>
      </ul>
    </div>
    <!-- 分类排行榜 -->
    <div class="classification">
      <h1>
        <span
          v-for="(item, index) in classRanking"
          :key="index"
          :class="{ con: classiFicationStyle == index }"
          @click="cfStyleChange(index)"
          >{{ item }}</span
        >
      </h1>
      <ul v-show="classiFicationStyle == 0">
        <li v-for="(item, index) in heavyRecommendationData" :key="item.id">
          <div class="serial" style="background-color: #ff3333">
            {{ index + 1 }}
          </div>
          <p>
            <span v-if="item.category">[{{ item.category }}]</span
            >{{ item.title }}
          </p>
        </li>
      </ul>
      <ul v-show="classiFicationStyle == 1">
        <li v-for="(item, index) in potentialNewbookData" :key="item.id">
          <div class="serial" style="background-color: #ff3333">
            {{ index + 1 }}
          </div>
          <p>
            <span>[{{ item.category }}]</span>{{ item.title }}
          </p>
        </li>
      </ul>
      <ul v-show="classiFicationStyle == 2">
        <li v-for="(item, index) in boutiqueData" :key="item.id">
          <div class="serial" style="background-color: #ff3333">
            {{ index + 1 }}
          </div>
          <p>
            <span>[{{ item.category }}]</span>{{ item.title }}
          </p>
        </li>
      </ul>
      <h2>更多排行&nbsp;&nbsp;<span></span></h2>
    </div>
  </main>
</template>

<style lang="scss" scoped>
.slideshow {
  width: 100%;
  height: 113px;
  overflow: hidden;
  .ul {
    position: relative;
    height: 113px;
    .van-swipe__track {
      display: flex;
    }
    .li {
      height: 113px;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
  ol {
    display: flex;
    position: absolute;
    width: 25px;
    bottom: 8px;
    left: 50%;
    justify-content: space-between;
    transform: translateX(-50%);
    li {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background-color: #74777c;
      &.con {
        background-color: #ced1d8;
      }
    }
  }
}
.bookType {
  height: 75px;
  display: flex;
  font-size: 14px;
  color: #5f5f5f;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  margin-bottom: 10px;
  li {
    display: flex;
    flex-direction: column;
    span {
      display: inline-block;
      margin-top: 7px;
    }
  }
}
.bist {
  & > h1 {
    height: 38px;
    line-height: 38px;
    padding-left: 10px;
    color: #5f5f5f;
    font-size: 16px;
    border-bottom: 1px solid #dedede;
    background-color: #fff;
    font-weight: normal;
  }
  ul {
    padding: 0 10px;
    background-color: #fff;
    height: 336px;
    overflow: hidden;
    li {
      display: flex;
      padding: 15px 0;
      border-bottom: 1px solid #efefef;
    }
  }
  .font {
    width: 80.2%;
    position: relative;
    padding-left: 10px;
    h1 {
      font-weight: normal;
      font-size: 15px;
      color: #333333;
      margin-bottom: 4px;
    }
    & > span {
      font-size: 12px;
      color: #999999;
    }
    p {
      font-size: 12px;
      color: #999999;
      margin-top: 4px;
      word-break: break-all;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2; /*设置隐藏行数*/
      -webkit-box-orient: vertical;
    }
    button {
      position: absolute;
      width: 74px;
      height: 30px;
      border: 1px solid #d2d6d8;
      right: 0;
      top: -3px;
      border-radius: 2px;
      font-size: 14px;
      background-color: #f3f3f3;
    }
  }
  h2 {
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 14px;
    color: #333333;
    font-weight: normal;
    background-color: #fff;
    margin-bottom: 10px;
    & > span {
      display: inline-block;
      width: 5px;
      height: 10px;
      background: url("/public/img/home/right.png");
      background-size: cover;
    }
  }
}
.potential {
  background-color: #fff;
  & > h1 {
    height: 38px;
    line-height: 38px;
    padding-left: 10px;
    padding-right: 10px;
    color: #5f5f5f;
    font-size: 16px;
    border-bottom: 1px solid #dedede;
    background-color: #fff;
    font-weight: normal;
    display: flex;
    justify-content: space-between;
    & > span {
      font-size: 14px;
      color: #f2503c;
    }
  }
  ul {
    width: 93.6%;
    padding-top: 20px;
    padding-bottom: 20px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #efefef;
  }
  li {
    width: 30.484%;
    img {
      width: 100%;
      height: 142px;
    }
    p {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 12px;
      color: #000000;
      text-align: center;
    }
  }
  h2 {
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 14px;
    color: #333333;
    font-weight: normal;
    background-color: #fff;
    margin-bottom: 10px;
    & > span {
      display: inline-block;
      width: 5px;
      height: 10px;
      background: url("/public/img/home/right.png");
      background-size: cover;
    }
  }
}
.boy {
  margin-bottom: 10px;
  & > h1 {
    height: 38px;
    line-height: 38px;
    padding-left: 10px;
    color: #5f5f5f;
    font-size: 16px;
    border-bottom: 1px solid #dedede;
    background-color: #fff;
    font-weight: normal;
  }
  ul {
    padding: 0 10px;
    background-color: #fff;
    li {
      display: flex;
      padding: 15px 0;
      border-bottom: 1px solid #efefef;
    }
  }
  li {
    & > p {
      font-size: 15px;
      color: #333333;
    }
  }
  .font {
    width: 80.4%;
    padding-left: 10px;
    position: relative;
    h1 {
      font-weight: normal;
      font-size: 15px;
      color: #333333;
      margin-bottom: 4px;
    }
    & > span {
      font-size: 12px;
      color: #999999;
    }
    p {
      font-size: 12px;
      color: #999999;
      margin-top: 4px;
      word-break: break-all;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2; /*设置隐藏行数*/
      -webkit-box-orient: vertical;
    }
    button {
      position: absolute;
      width: 74px;
      height: 30px;
      border: 1px solid #d2d6d8;
      right: 0;
      top: -3px;
      border-radius: 2px;
      font-size: 14px;
      background-color: #f3f3f3;
    }
  }
  h2 {
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 14px;
    color: #333333;
    font-weight: normal;
    background-color: #fff;
    & > span {
      display: inline-block;
      width: 5px;
      height: 10px;
      background: url("/public/img/home/right.png");
      background-size: cover;
    }
  }
}
.classification {
  margin-top: 10px;
  & > h1 {
    height: 38px;
    outline: 1px solid #eeeeee;
    background-color: #fff;
    display: flex;
    & > span {
      display: inline-block;
      width: 33%;
      height: 36px;
      line-height: 36px;
      text-align: center;
      font-size: 16px;
      color: #5f5f5f;
      font-weight: normal;
      &.con {
        border-bottom: 2px solid #f2503c;
      }
    }
  }
  ul {
    padding: 0 10px;
    background-color: #fff;
  }
  li {
    height: 42px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #efefef;
    .serial {
      width: 15px;
      height: 15px;
      text-align: center;
      line-height: 15px;
      border-radius: 2px;
      color: #fff;
      font-size: 13px;
      margin-right: 10px;
    }
    p {
      font-size: 15px;
      color: #333333;
      span {
        color: #666666;
        display: inline-block;
        margin-right: 6px;
      }
    }
  }
  h2 {
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 14px;
    color: #333333;
    font-weight: normal;
    background-color: #fff;
    margin-bottom: 20px;
    & > span {
      display: inline-block;
      width: 5px;
      height: 10px;
      background: url(https://img.xmkanshu.com/operateimg/img/img/15000/15000.png);
      background-size: cover;
    }
  }
}

// 轮播图下标
::v-deep .van-swipe__indicators {
  width: 25px;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
}
::v-deep .van-swipe__indicator {
  display: inline-block;
  width: 4px;
  height: 4px;
  background-color: #74787e;
  border-radius: 50%;
}
::v-deep .van-swipe__indicator--active {
  background-color: #fff;
}
</style>